<script setup lang="ts">
import type { RouteRecordRaw } from 'vue-router'
import { useLayoutConfigStore } from '@/store/layoutConfig'

const SubMenu = defineAsyncComponent(() => import('./SubMenu.vue'))
const SvgIcon = defineAsyncComponent(() => import('@/components/SvgIcon/SvgIcon.vue'))

defineProps<{
  menu: RouteRecordRaw
}>()

const layoutConfig = useLayoutConfigStore()
function handelMenu(val: any) {
  // console.log('handelMenu', val);
  layoutConfig.selectMenu(val)
}
</script>

<template>
  <el-menu-item v-if="!menu.children || menu.children.length <= 0" class="w-full h-full px-8px py-0 mt-8px"
    :index="menu.path" @click="handelMenu(menu)">
    <SvgIcon :name="<string>menu.meta?.icon" />
    <template #title>
      <span class="text-14px text-[#333639] ml-10px">{{ menu.meta?.title }}</span>
    </template>
  </el-menu-item>
  <el-sub-menu v-else :index="menu.path" class="px-8px py-0 pt-8px">
    <template #title>
      <SvgIcon :name="<string>menu.meta?.icon" />
      <span class="text-14px text-[#333639] ml-10px">{{ menu.meta?.title }}</span>
    </template>
    <SubMenu v-for="childMenu in menu.children" :menu="childMenu" :key="childMenu.path" />
  </el-sub-menu>
</template>

<style scoped lang="scss">
.el-sub-menu {
  .el-menu>.el-menu-item {
    height: 42px;
    border-left: 3px solid #ffffff;

    &:hover {
      background-color: rgb(241, 241, 241);
      border-radius: 6px;
    }
  }

  :deep(.el-sub-menu__title) {
    height: 42px;

    &:hover {
      background-color: rgb(241, 241, 241);
      border-radius: 6px;
    }
  }

  // 搜索时的样式
  :deep(.el-sub-menu__title.el-tooltip__trigger.el-tooltip__trigger) {
    height: 50px;
    width: 100%;
    padding: 0;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.el-sub-menu.is-active {
  .el-menu {
    .el-menu-item.is-active {
      height: 42px;
      border-left: 3px solid #316c72;
      background-color: #eef4f5;
      border-radius: 4px;

      span {
        color: #316c72;
      }

      .svg-icon {
        color: #316c72;
      }
    }
  }

  :deep(.el-sub-menu__title) {
    span {
      color: #316c72;
    }

    .svg-icon {
      color: #316c72;
    }

    .el-icon.el-sub-menu__icon-arrow {
      color: #316c72;
    }
  }

  // 搜索时激活菜单的样式
  :deep(.el-sub-menu__title.el-tooltip__trigger.el-tooltip__trigger) {
    height: 50px;
    width: 100%;
    padding: 0;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>